<template>
  <div style="padding: 20px">
    <el-button @click="batchDel" type="danger">批量删除</el-button>
    <!-- 
      borrowAmount: 10000

      id: "1"
      integralEnd: 50
      integralStart: 10
     -->
    <el-table
      :data="list"
      @selection-change="handleSelectionChange"
      stripe
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="borrowAmount" label="借款额度"></el-table-column>
      <el-table-column
        prop="integralStart"
        label="积分区间开始"
      ></el-table-column>
      <el-table-column
        prop="integralEnd"
        label="积分区间结束"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import integralGradeApi from '@/api/integral-grade'
//js脚本
export default {
  data() {
    return {
      list: [],
      selection: undefined,
    }
  },
  created() {
    //调用api/integral-grade.js的函数发起异步请求得到promise对象 再获取响应结果
    this.initData()
  },
  methods: {
    //批量删除按钮单击事件
    batchDel() {
      // console.log(this.selection)
      //如果没有选中要删除的行 不发送批量删除的请求
      if (!this.selection || this.selection.length === 0) {
        this.$message.warning('请选择要删除的积分等级')
      }
      let arr = []
      //遍历selection集合 获取每一个选中行的id值拼接成字符串
      this.selection.forEach((row) => {
        arr.push(row.id) //将正在遍历的行的id存到数组中
      })
      let ids = arr.join(',') //使用逗号拼接数组中每两个元素
      console.log('拼接后的id : ' + ids)
      //ids代表要删除的积分等级的id字符串(1,2,3)
      integralGradeApi.batchDel(ids).then((r) => {
        // console.log(r)
        this.$message.success(r.message)
        this.initData()
      })
    },
    handleSelectionChange(selection) {
      //数据选中行发生改变时回调，传入的selection代表选中行的json对象的数组
      console.log(selection)
      this.selection = selection
    },
    initData() {
      integralGradeApi.getAll().then((r) => {
        //r代表后端接口响应的 响应体内容(R类的对象)
        console.log(r.data.items) //默认r代表响应报文对象,由于axios配置了响应拦截器 返回了响应体所以此处接收的是响应体中的R对象
        this.list = r.data.items
      })
    },
    handleEdit(idx, row) {
      //参数1：点击按钮所在行的索引，参数2：点击按钮所在行的json对象
      // console.log(idx, row)
      //跳转到 新增使用的表单页回显要更新的数据，但是不希望使用新增路由
      //携带要编辑的积分等级id跳转
      this.$router.push(`/integralGrade/edit/${row.id}`)
    },
    handleDelete(idx, row) {
      this.$confirm(`此操作将永久删除该积分等级, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //console.log('删除：' + row)
          //提交 删除点击按钮所在行的 数据的id给后端  可以删除指定的积分等级
          integralGradeApi.delete(row.id).then((r) => {
            //删除成功 弹出删除成功的提示
            this.$message.success('删除成功')
            //刷新当前页面
            this.initData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>
<style></style>
